<template>
  <div class="container">
    <el-carousel class="chart" autoplay indicator-position="none">
      <el-carousel-item v-for="(item, index) in dataList" :key="index" @click="openDetail(item)">
        <div class="title">{{ item.sjName }}</div>
        <div class="content">{{ item.sjDsc }}</div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <sgsj-chart ref="dialogRef" v-if="dialog.table" @closed="dialog.table = false"></sgsj-chart>
</template>
<script>
import dprevent from '@/api/dprevent'
import SgsjChart from './SgsjChart.vue'
export default {
  name: 'DpLeftItem4',
  components: { SgsjChart },
  data() {
    return {
      dialog: {
        table: false
      },
      dataList: [],
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          show: false
        },
        series: [
          {
            name: '外部事件',
            type: 'pie',
            radius: ['60%', '80%'],
            label: {
              formatter: '{b}:{c}项\n{d}%'
            },
            data: [
              { value: 1048, name: '人身' },
              { value: 735, name: '设备' },
              { value: 580, name: '火灾' },
              { value: 484, name: '其他' }
            ]
          },
          {
            name: '内部事件',
            type: 'pie',
            radius: ['0%', '40%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '人身' },
              { value: 735, name: '设备' },
              { value: 580, name: '火灾' },
              { value: 484, name: '其他' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.getApiData()
  },
  methods: {
    getApiData() {
      dprevent.getSgsjList().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataList = res.result
            console.log(this.dataList)
          }
        }
      })
    },
    openDetail(item) {
      this.dialog.table = true
      this.$nextTick(() => {
        this.$refs.dialogRef.open().setData(item)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .chart {
    width: 100%;
    height: 100%;
    margin: 15px;
    .title {
      color: rgb(145, 227, 255);
      text-indent: 2ch;
      font-size: 14px;
      font-weight: bold;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 使用省略号表示超出的文本 */
    }
    .content {
      font-size: 14px;
      margin-top: 5px;
      text-indent: 2ch;
    }
  }
}
</style>
